<template>
	<view>
		<u-sticky>
			<view class="topWrapper" v-if="false">
				<tabs :currentCode="bizType" @selectedItemCode="selectedCode"></tabs>
			</view>
		</u-sticky>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" bottom="90rpx">
			<view class="invoiceItem" v-for="(item, index) in invoiceList" :key="item.invoiceId"
				@click="goInvoiceDetail(item)">
				<text class="status">{{item.invoiceStatus|invoiceStatus}}</text>
				<view class="value">
					<text>订单类型: {{item.bizType|bizType}}</text>
					<view style="display: flex; justify-content: flex-end;">
						<text class="price">¥{{item.invoiceAmount}}</text>
						<u-icon class="arrow" name="arrow-right" size="16"></u-icon>
					</view>
				</view>
				<text>申请时间: {{item.applyTime}}</text>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		invoiceList,
	} from '@/api/invoice-api.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import tabs from '@/pagesC/components/tabs.vue'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			tabs
		},
		data() {
			return {
				invoiceList: [],
				bizType: 1,
			}
		},
		onLoad() {

		},
		methods: {
			upCallback(page) {
				invoiceList({
					bizType: this.bizType,
					pageNo: page.num,
					pageSize: page.size
				}).then(res => {
					this.mescroll.endSuccess(res.data.length);
					//设置列表数据
					if (page.num == 1) this.invoiceList = []; //如果是第一页需手动制空列表
					this.invoiceList = this.invoiceList.concat(res.data); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			selectedCode(code) {
				this.bizType = code;
				this.mescroll.triggerDownScroll();
			},
			// 发票详情
			goInvoiceDetail(item) {
				uni.navigateTo({
					url:'./invoice-detail?invoiceId=' + item.invoiceId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topWrapper {
		padding: 10upx;
	}

	.invoiceItem {
		margin: 0 20upx 20upx;
		padding: 20upx;
		border-radius: 16upx;
		background-color: $bg-white-color;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: $text-color-33;
		font-size: 28upx;

		.status {
			background-color: $text-color-price;
			color: $text-color-ff;
			width: 120upx;
			height: 44upx;
			line-height: 44upx;
			text-align: center;
			border-radius: 6upx;
			font-size: 28upx;
			font-weight: bold;
		}

		.value {
			margin: 20upx 0;
			display: flex;
			justify-content: space-between;
			.price {
				color: $text-color-price;
				font-size: 24upx;
				margin-right: 20upx;
			}
		}

		.arrow {
			position: absolute;
			right: 20upx;
			top: 40upx;
		}


	}
</style>
